<template>
  <el-row class="infoItem">
    <div v-for="(item, index) in dataList" :key="item + index">
      <div v-if="item.kind == 0">
        <el-row v-if="item.level == 0">
          <el-col :span="2" class="tit2">
            {{ item.itemName + ":" }}
          </el-col>
          <div v-if="item.children && item.children.length > 0">
            <el-col :span="22">
              <el-row>
                <ItemPrescript :list="item.children" :isFinish="isFinish"></ItemPrescript>
              </el-row>
            </el-col>
          </div>
        </el-row>
        <el-row v-else>
          <el-col :span="2" class="tit2">
            {{ item.itemName + ":" }}
          </el-col>
          <div v-if="item.children && item.children.length > 0">
            <el-col :span="22">
              <el-row>
                <ItemPrescript :list="item.children" :isFinish="isFinish"></ItemPrescript>
              </el-row>
            </el-col>
          </div>
        </el-row>
      </div>
      <!-- input 1 -->
      <el-col :span="6" v-else-if="item.kind == 1">
        <!-- 放空目录位置 -->
        <el-col :span="10" class="tit2">
          {{ item.itemName + ":" }}
        </el-col>
        <el-col :span="14">
          <el-input
            resize="both"
            :disabled="isFinish"
            v-model="item.indicatorsActVal"
            :placeholder="item.itemName"
          ></el-input>
        </el-col>
      </el-col>
      <!-- textarea 2 -->
      <el-col :span="6" v-else-if="item.kind == 2">
        <el-col :span="24">
          <el-input
            type="textarea"
            resize="both"
            :disabled="isFinish"
            v-model="item.indicatorsActVal"
            :placeholder="item.itemName"
          ></el-input>
        </el-col>
      </el-col>
      <!-- radio 3 -->
      <el-col :span="6" v-else-if="item.kind == 3">
        <!--<el-col :span="2" v-if="item.level == 0">&nbsp;</el-col>-->
        <MyRadio v-model="item.indicatorsActVal" :item="item" :isFinish="isFinish"></MyRadio>
      </el-col>
      <!-- selector 4 -->
      <el-col :span="6" v-else-if="item.kind == 4">
        <!--<el-col :span="2" v-if="item.level == 0">&nbsp;</el-col>-->
        <MySelector v-model="item.indicatorsActVal" :item="item"></MySelector>
      </el-col>
      <!-- switch btn 5 -->
      <el-col :span="6" v-else-if="item.kind == 5">
        <!--<el-col :span="2" v-if="item.level == 0">&nbsp;</el-col>
        <el-switch v-model="item.defaulted"></el-switch>-->
        <el-form :ref="'form' + item.itemName" :rules="rules">
          <el-form-item :label="item.itemName">
            <el-switch v-model="item.indicatorsActVal"></el-switch>
          </el-form-item>
        </el-form>
      </el-col>
      <!-- datapicker 5 -->
      <el-col :span="6" v-else-if="item.kind == 6">
        <el-form :ref="'form_' + item.itemName" :model="item" label-width="120px" :rules="rules">
          <el-form-item :label="item.itemName">
            <el-date-picker
              v-model="item.indicatorsActVal"
              type="datetime"
              :placeholder="item.itemName"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </el-col>
      <!-- checkbox 7 -->
      <el-col :span="6" v-else-if="item.kind == 7">
        <MyCheckBox v-model="item.indicatorsActVal" :item="item" :isFinish="isFinish"></MyCheckBox>
      </el-col>
    </div>
  </el-row>
</template>

<script>
  import MySelector from "./mySelector";
  import MyRadio from "./myRadio";
  import MyCheckBox from "./myCheckBox";

  export default {
    name: "ItemPrescript",
    components: {
      MySelector,
      MyRadio,
      MyCheckBox
    },
    props: {
      list: Array,
      isFinish:{
        type:Boolean,
        default:false
      },
    },
    created() {
      this.dataList = this.list;
    },
    data() {
      return {
        dataList: [],
        rules: {
          indicatorsActVal: [{required: true, message: '字段不能为空', trigger: 'blur'}],
        },
      };
    },
    methods: {}
  };
</script>

<style lang="scss" scoped>
  .infoItem {
    .tit2 {
      text-align: right;
      float: left;
      font-size: 14px;
      color: #999;
      line-height: 40px;
      padding: 0 4px 0 0;
    }
    .el-form-item__label {
      width: 8.33333%;
      color: #999;
      font-weight: 400;
    }
  }
</style>
